<template>
	<view class="content">
		<view class="header">
			<view class="navList">
				<view @click="changNavIndex(index)" :class="navIndex==index?'border_bottom active':''" v-for="(item,index) in navList" :key="index">{{item.name}}</view>
			</view>
			<input type="text" @input="getValue" :value="value" placeholder="大家都在搜“短发”" />
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				navIndex: 0,
				navList: [{
						name: "全部"
					},
					{
						name: "男生"
					},
					{
						name: "女生"
					}
				]
			};
		},
		onLoad() {},
		methods: {
			changNavIndex(e) {
				this.navIndex = e
			},
			getValue(e){
				console.log(e)
				// this.navIndex = e.value
			}
		}
	};
</script>

<style>
	.content {}
	
	.header{
		width:750rpx;
		height:168rpx;
		background:rgba(255,255,255,1);
	}
	.header .navList {
		display: flex;
		justify-content: space-around;
		font-size:24rpx;
		line-height:34rpx;
		color:rgba(153,153,153,1);
		margin-bottom: 10rpx;
	}
	.header input{
		width:670rpx;
		height:60rpx;
		background:rgba(242,242,242,1);
		opacity:1;
		border-radius:30rpx;
	}
</style>
